<template>
	<view class="page">
		<!-- 个人名片：动态数据卡 -->
		<view class="hero-card">
			<view class="hero-left" @tap="chooseAvatar">
				<image class="hero-avatar" :src="profile.avatar" />
			</view>
			<view class="hero-mid">
				<view class="hero-top">
					<text class="hero-name">{{profile.name || '未命名用户'}}</text>
					<view class="level-badge">LEVEL 5</view>
				</view>
				<view class="hero-sub">{{profile.school || '社区活跃达人'}}</view>
				<view class="hero-stats">
					<text>❤️ 健康指数 88</text>
					<text>✔ 连续签到7天</text>
				</view>
			</view>
            <button class="hero-edit pressable" size="mini" @tap="toggleEdit">{{editing?'保存':'编辑资料'}}</button>
		</view>

		<!-- 3x3 服务网格 -->
		<view class="grid">
            <navigator class="g-item pressable" url="/pages/settings/voice">
				<view class="g-ico">🛠️</view>
				<text class="g-txt">设置</text>
			</navigator>
            <view class="g-item pressable" @tap="openHelp"><view class="g-ico">💬</view><text class="g-txt">客服</text></view>
            <navigator class="g-item pressable" url="/pages/need/publish"><view class="g-ico">🎯</view><text class="g-txt">发布需求</text></navigator>
            <navigator class="g-item pressable" url="/pages/match/match"><view class="g-ico">📋</view><text class="g-txt">任务清单</text></navigator>
            <navigator class="g-item pressable" url="/pages/volunteer/register"><view class="g-ico">🤝</view><text class="g-txt">志愿者</text></navigator>
            <view class="g-item pressable" @tap="openSettings"><view class="g-ico">⚙️</view><text class="g-txt">偏好</text></view>
			<view class="g-item disabled"><view class="g-ico">⭐</view><text class="g-txt">预留</text></view>
			<view class="g-item disabled"><view class="g-ico">⭐</view><text class="g-txt">预留</text></view>
			<view class="g-item disabled"><view class="g-ico">⭐</view><text class="g-txt">预留</text></view>
		</view>

		<!-- 紧急联系人玻璃态表单 -->
		<view class="em-card">
			<view class="em-title">📞 紧急联系人</view>
			<view class="row">
				<input class="ipt glass" type="number" placeholder="请输入手机号" v-model="profile.emergencyPhone" />
            <button class="add-btn pressable" size="mini" @tap="toggleEdit">{{editing?'保存':'＋添加'}}</button>
			</view>
			<view class="em-list">
				<view class="em-item"><text>👨 儿子</text><text class="em-phone">138****1234</text></view>
				<view class="em-item"><text>👩 女儿</text><text class="em-phone">139****5678</text></view>
            <button class="call pressable" size="mini" @tap="callEmergency">一键拨打当前</button>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="action-list">
			<view class="action" hover-class="hover" @tap="openSettings">
				<text class="a-text">设置</text>
			</view>
			<view class="action" hover-class="hover" @tap="openHelp">
				<text class="a-text">帮助与客服</text>
			</view>
			<navigator class="action" hover-class="hover" url="/pages/volunteer/register">
				<text class="a-text">志愿者注册</text>
			</navigator>
			<navigator class="action" hover-class="hover" url="/pages/need/publish">
				<text class="a-text">发布需求</text>
			</navigator>
			<navigator class="action" hover-class="hover" url="/pages/match/match">
				<text class="a-text">匹配与任务清单</text>
			</navigator>
		</view>

		<view class="safe-gap" />
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
export default {
	data(){
		return{
			editing:false,
			profile: storageManager.getUserProfile()
		}
	},
	onLoad(){
		// 加载用户资料
		this.profile = storageManager.getUserProfile()
	},
	methods:{
		toggleEdit(){
			// 步骤1：触觉反馈
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'light' }) } catch(e){}
			}
			
			if(this.editing){
				// 步骤2：保存用户资料
				storageManager.saveUserProfile(this.profile)
				
				// 步骤3：保存成功提示
				uni.showToast({ 
					title:'已保存', 
					icon:'success',
					duration: 1500
				})
				
				// 步骤4：保存成功触觉反馈
				setTimeout(() => {
					if(uni.vibrateShort){
						try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
					}
				}, 200)
			}
			this.editing=!this.editing
		},
		chooseAvatar(){
			// 步骤1：触觉反馈
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'light' }) } catch(e){}
			}
			
			// 步骤2：选择图片
			uni.chooseImage({
				count:1,
				sizeType: ['compressed'],
				success:res=>{ 
					this.profile.avatar=res.tempFilePaths[0]
					
					// 步骤3：选择成功触觉反馈
					if(uni.vibrateShort){
						try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
					}
				}
			})
		},
		callEmergency(){
			if(!this.profile.emergencyPhone){ 
				return uni.showToast({ title:'请先填写手机号', icon:'none' }) 
			}
			
			// 步骤1：拨打前触觉反馈
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'heavy' }) } catch(e){}
			}
			
			// 步骤2：拨打电话
			uni.makePhoneCall({ phoneNumber:this.profile.emergencyPhone })
		},
		openSettings(){ 
			// 触觉反馈
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'light' }) } catch(e){}
			}
			uni.navigateTo({ url:'/pages/settings/voice' }) 
		},
		openHelp(){ 
			// 触觉反馈
			if(uni.vibrateShort){
				try { uni.vibrateShort({ type: 'light' }) } catch(e){}
			}
			uni.showToast({ title:'帮助与客服（演示）', icon:'none' }) 
		}
	}
}
</script>

<style scoped>
.page{min-height:100vh;background:#F8F9FA}
/* 名片 */
.hero-card{margin:20rpx 24rpx;padding:20rpx;border-radius:20rpx;background:linear-gradient(135deg,#00D4FF, #4785F5);color:#fff;display:flex;align-items:center;gap:16rpx;box-shadow:0 12rpx 28rpx rgba(0,0,0,.12)}
.hero-left{width:120rpx;height:120rpx;border-radius:60rpx;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-avatar{width:108rpx;height:108rpx;border-radius:54rpx;background:#fff}
.hero-mid{flex:1}
.hero-top{display:flex;align-items:center;gap:12rpx}
.hero-name{font-size:36rpx;font-weight:700}
.level-badge{padding:6rpx 12rpx;border-radius:999rpx;background:rgba(255,255,255,.22);border:1rpx solid rgba(255,255,255,.4);font-size:22rpx}
.hero-sub{opacity:.9;margin-top:4rpx}
.hero-stats{display:flex;align-items:center;gap:16rpx;margin-top:8rpx;font-size:24rpx}
.hero-edit{height:64rpx;background:#FF6B35;color:#fff;border-radius:16rpx;transition:all 0.2s ease;box-shadow:0 4rpx 12rpx rgba(255,107,53,.3)}
.hero-edit:active{transform:scale(0.94);box-shadow:0 2rpx 8rpx rgba(255,107,53,.5)}

/* 3x3 服务网格（含动效） */
.grid{margin:16rpx 24rpx;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16rpx}
.g-item{height:160rpx;border-radius:16rpx;background:rgba(255,255,255,.86);backdrop-filter:blur(16rpx);border:1rpx solid rgba(0,0,0,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2D3047;transition:all 0.2s ease;box-shadow:0 4rpx 12rpx rgba(0,0,0,.04)}
.g-item:active{transform:scale(0.96);box-shadow:0 2rpx 8rpx rgba(0,0,0,.08)}
.g-item.disabled{opacity:.5;pointer-events:none}
.g-ico{width:72rpx;height:72rpx;line-height:72rpx;text-align:center;border-radius:36rpx;background:linear-gradient(135deg,#FF6B35,#FFD166);color:#fff;margin-bottom:8rpx;font-size:36rpx;transition:transform 0.2s ease}
.g-item:active .g-ico{transform:scale(1.08)}
.g-txt{font-size:26rpx;color:#2D3047}

/* 紧急联系人玻璃态 */
.em-card{margin:8rpx 24rpx 16rpx;background:rgba(255,255,255,.9);backdrop-filter:blur(18rpx);border:1rpx solid rgba(0,0,0,.06);border-radius:16rpx;box-shadow:0 8rpx 20rpx rgba(0,0,0,.06);padding:16rpx}
.em-title{font-size:30rpx;color:#2D3047;margin-bottom:8rpx}
.row{display:flex;gap:12rpx;align-items:center}
.ipt{flex:1;height:80rpx;background:#f7f7f7;border-radius:12rpx;padding:0 16rpx}
.ipt.glass{background:rgba(255,255,255,.8);border:1rpx solid rgba(0,0,0,.06)}
.add-btn{background:#00D4FF;color:#fff;border-radius:12rpx}
.em-list{margin-top:12rpx}
.em-item{display:flex;align-items:center;justify-content:space-between;background:#fafafa;border-radius:12rpx;padding:12rpx 16rpx;margin-bottom:8rpx}
.em-phone{color:#2D3047}
.call{background:#FF6B35;color:#fff;transition:all 0.2s ease;box-shadow:0 4rpx 12rpx rgba(255,107,53,.3)}
.call:active{transform:scale(0.94);box-shadow:0 2rpx 8rpx rgba(255,107,53,.5)}
.add-btn{transition:all 0.2s ease}
.add-btn:active{transform:scale(0.94)}

.action-list{padding:8rpx 24rpx 24rpx}
.action{height:96rpx;background:#fff;border-radius:16rpx;display:flex;align-items:center;padding:0 20rpx;margin-top:16rpx;border:1rpx solid rgba(0,0,0,.06)}
.a-text{font-size:30rpx;color:#666}
.hover{background:#f7f7f7}
.safe-gap{height:160rpx}
</style>

